/*
 * @Description: 充值成功页
 * @Author: ziwei.ma
 * @Date: 2019-05-20 15:03:08
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-05-20 18:49:43
 */
<template>
  <div id="app">
    <pay-success
      :orderDetailObj="detailObj"
      v-if="setType===1"
    ></pay-success>
    <busy-service v-else-if="setType===2"></busy-service>
  </div>
</template>

<script>
import { getUrlParams } from 'vue-xiaobu-utils'
import { getOrderDetail } from './api/api.js'
import PaySuccessVue from './components/PaySuccess.vue'
import BusyServiceVue from './components/BusyService.vue'
import { Indicator } from 'mint-ui'
import 'mint-ui/lib/indicator/style.css'
import 'mint-ui/lib/spinner/style.css'
export default {
  name: 'App',
  components: {
    'pay-success': PaySuccessVue,
    'busy-service': BusyServiceVue
  },
  data() {
    return {
      detailObj: {}, // 协议返回的订单详情
      urlOrderID: '', // 从url中获取的orderID
      setType: 0, // 协议发送状态:0为进度条-协议发送中，1为协议发送成功，2为协议发送失败
      index: 0 // 查询次数
    }
  },
  mounted() {
    this.setRightBtn()
    this.urlOrderID = getUrlParams()['orderId']
    if (this.urlOrderID === undefined) {
      this.urlOrderID = localStorage.getItem('TRADE_ID_jdlfa12')
    }
    // this.urlOrderID = '2019060617154294430'  //正式环境订单号
    Indicator.open({
      text: '正在努力充值中...',
      spinnerType: 'fading-circle'
    })
    this.inquireOrder()
  },
  methods: {
    inquireOrder() {
      getOrderDetail(this.urlOrderID).then(res => {
        this.setType = 1
        this.detailObj = res
        Indicator.close()
      }).catch(() => {
        this.index++
        if (this.index < 10) {
          setTimeout(() => {
            // 如果查询失败则调用自身再次查询，查询10次，间隔500毫秒
            this.inquireOrder()
          }, 500)
        } else {
          this.setType = 2
          Indicator.close()
        }
      })
    },
    goBack() {
      window.location.href = 'xbapp://goback'
    },
    setRightBtn() {
      var Menuitems = []
      var Menuitem = {}
      var i = 1
      Menuitem.menutext = '完成'
      Menuitem.menuid = i
      Menuitem.menuicon = ''
      Menuitems.push(Menuitem)
      this.$UI.then(UI => {
        UI.setRightItem(Menuitems, () => { console.log('完成按钮生成成功') }, () => { console.log('完成按钮生成失败') })
      })
      window.onMenuSelect = (index) => {
        location.assign('xbapp://home?select=1')
      }
    }
  }
}
</script>

<style>
html,
body,
#app {
  height: 100%;
}
.mint-indicator-wrapper {
  background: rgba(0, 0, 0, 0.5) !important;
}
</style>
